<template>
  <div class="container">
    <el-table ref="tableRef" row-key="date" :data="tableData" style="width: 100%">
      <el-table-column prop="name" label="姓名" />
      <el-table-column
          prop="tag"
          label="班级"
          :filters="[
          { text: '22软件3班', value: '22软件3班' },
          { text: '22软件1班', value: '22软件1班' },
          { text: '22软件2班', value: '22软件2班' }
        ]"
          :filter-method="filterTag"
          filter-placement="bottom-end"
      >
        <template #default="scope">
          <el-tag :type="scope.row.tag === 'Home' ? '' : 'success'" disable-transitions>{{
              scope.row.tag
            }}</el-tag>
        </template>
      </el-table-column>
      <el-table-column prop="date" label="学号" sortable />
      <el-table-column sortable label="任务统计" class-name="task">
        <template #header>
          <div class="task-content">
            <div>任务统计</div>
            <div class="task1">
              <el-tooltip class="box-item" effect="dark" content="未学" placement="top">
                <div class="task1-1">
                  <div class="task1-red"></div>
                  <span>未学</span>
                </div>
              </el-tooltip>
              <el-tooltip class="box-item" effect="dark" content="在学" placement="top">
                <div class="task1-1">
                  <div class="task1-yellow"></div>
                  <span>未学</span>
                </div>
              </el-tooltip>
              <el-tooltip class="box-item" effect="dark" content="已学" placement="top">
                <div class="task1-1">
                  <div class="task1-green"></div>
                  <span>已学</span>
                </div>
              </el-tooltip>
            </div>
          </div>
        </template>
        <template #default>
          <div class="task2">
            <el-tooltip class="box-item" effect="dark" content="已学任务：1" placement="top">
              <div class="task2-1">1</div>
            </el-tooltip>
            <el-tooltip class="box-item" effect="dark" content="在学任务：2" placement="top">
              <div class="task2-2">2</div>
            </el-tooltip>
            <el-tooltip class="box-item" effect="dark" content="未学任务：2" placement="top">
              <div class="task2-3">2</div>
            </el-tooltip>
          </div>
        </template>
      </el-table-column>
    </el-table>
  </div>
</template>

<script lang="ts" setup>
import { ref } from 'vue'
import type { TableInstance } from 'element-plus'

interface User {
  date: string
  name: string
  unlearned: number
  learning: number
  learned: number
  tag: string
}

const tableRef = ref<TableInstance>()

const filterTag = (value: string, row: User) => {
  return row.tag === value
}


const tableData: User[] = [
  {
    date: '22002321',
    name: '郑嘉怡',
    unlearned: 1,
    learning: 2,
    learned: 2,
    tag: '22软件3班'
  },
  {
    date: '20008012',
    name: '黎杏莲',
    unlearned: 1,
    learning: 2,
    learned: 2,
    tag: '22软件2班'
  },
  {
    date: '20005666',
    name: '谢文敏',
    unlearned: 1,
    learning: 2,
    learned: 2,
    tag: '22软件1班'
  },
  {
    date: '20003142',
    name: '梁晓华',
    unlearned: 1,
    learning: 2,
    learned: 2,
    tag: '22软件3班'
  },
  {
    date: '20007812',
    name: '黄敏静',
    unlearned: 1,
    learning: 2,
    learned: 2,
    tag: '22软件3班'
  },
  {
    date: '20005614',
    name: '范冰冰',
    unlearned: 1,
    learning: 2,
    learned: 2,
    tag: '22软件3班'
  }
]
</script>
<style scoped>
.container {
width: 60vw;
  margin-left: 10vw;
  margin-top: 5vh;

}

/* 以下是转换后的类应用到元素上 */
.task-content{
  width: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}
.task1{
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  height: 100%;
}
.task1-1{
  display: flex;
  align-items: center;


}
.task1-red{
  width: 30px;
  height: 20px;
  background-color: #ef4444;
}
.task1-yellow{
  width: 30px;
  height: 20px;
  background-color: #ecc94b;
}
.task1-green{
  width: 30px;
  height: 20px;
  background-color: #48bb78;
}
.task2{
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  height: 100%;
}
.task2-1{
  width: 30px;
  height: 20px;
  background-color: #48bb78;
}
.task2-2{
  width: 30px;
  height: 20px;
  background-color: #ecc94b;
}
.task2-3{
  width: 30px;
  height: 20px;
  background-color: #ef4444;
}
.box-item{
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  text-align: center;
}
.el-tag.el-tag--success{
  --el-tag-text-color: #2ba5ce;
  --el-tag-bg-color: none;
  --el-tag-border-color: #ffffff;
}
</style>
